<template>
  <div class="drawer-main">
    <drawer ref="drawerRef">
      <!-- left-area -->
      <!-- <drawer-item item-pos="left" :width="itemWidth.left" :visible="false">
        <template v-slot:button="props">
          <div class="fold-btn1 my-column-btn">
            <a-icon :type="props.fold ? 'vertical-right' : 'vertical-left'" />
          </div>
        </template>
        <template #content>
          <left-area />
        </template>
      </drawer-item> -->
      <!-- center-area -->
      <drawer-item item-pos="center">
        <drawer-item item-pos="center"></drawer-item>
        <drawer-item item-pos="bottom" :height="200">
          <template v-slot:button="props">
            <div class="fold-btn1 my-row-btn">
              <a-icon :type="props.fold ? 'down' : 'up'" />
            </div>
          </template>
          <template #content>
            <bottom-area />
          </template>
        </drawer-item>
      </drawer-item>
      <!-- right-area -->
      <drawer-item item-pos="right" :width="itemWidth.right">
        <template v-slot:button="props">
          <div class="fold-btn1 my-column-btn">
            <a-icon :type="props.fold ? 'vertical-left' : 'vertical-right'" />
          </div>
        </template>
        <template #content>
          <left-area />
        </template>
      </drawer-item>
    </drawer>
  </div>
</template>

<script>
import Drawer from "./components/drawer";
import DrawerItem from "./components/drawer-item";
import LeftArea from "./components/left-area";
import BottomArea from "./components/bottom-area";

export default {
  name: "app",
  components: {
    Drawer,
    DrawerItem,
    LeftArea,
    BottomArea
  },
  data() {
    return {
      itemWidth: {
        right: 200,
        left: 300
      }
    };
  }
};
</script>
<style lang="less" scoped>
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
.drawer-main {
  width: 100%;
  height: 100%;
  position: absolute;
  /deep/ .components-layout-demo-top-side-2 {
    height: 100%;
  }
  .fold-btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white !important;
    font-size: 15px;
  }
  .my-column-btn {
    width: 10px;
    height: 100%;
  }
  .my-row-btn {
    width: 100%;
    height: 10px;
  }
}
</style>
